<template>
  <div>
    <!-- 搜索框 -->
    <div class="vehicle-details-wrap">
      <div class="box">
        <TopFilter :list="topSalesFilterList" :cols="2" :labelWidth="'85'" :collapse="false" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
      </div>
    </div>
    <FilterTable
      ref="salesTable"
      height="auto"
      columnsRef="salesTable"
      :columns="tableColumns"
      :datakey="'rows'"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :onColumnsChange="columns => (this.tableColumns = columns)"
    ></FilterTable>
  </div>
</template>

<script>
import moment from 'moment';
import { querySales } from '@/api/customerRepair/customerLoss/taskEntry';
export default {
  components: {},
  props: ['getdata'],
  data() {
    return {
      topSalesFilterList: this.createTopFilterList(), // 查询字段
      tableColumns: this.createdTable(), // 表格字段
      fetchParams: { xhrAbort: true },
      fetchApi: querySales
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.changeHandle();
  },
  methods: {
    // 查询字段
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '回访日期',
          fieldName: 'startDate|endDate',
          initialValue: [
            moment(new Date())
              .subtract(1, 'months')
              .format('YYYY-MM-DD'),
            moment(new Date()).format('YYYY-MM-DD')
          ],
          placeholder: '选择日期',
          valueFormat: 'yyyy-MM-dd'
        }
      ];
    },

    // 列表字段
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '回访编号',
          dataIndex: 'REMIND_ID',
          width: 150,
          sorter: true
        },
        {
          title: '回访类型',
          dataIndex: 'description',
          width: 150,
          sorter: true
        },
        {
          title: '车主客户编号',
          dataIndex: 'OWNER_NO',
          width: 150,
          sorter: true
        },
        {
          title: '车主客户姓名',
          dataIndex: 'OWNER_NAME',
          width: 150,
          sorter: true
        },
        {
          title: '回访日期',
          dataIndex: 'REMIND_DATE',
          width: 150,
          sorter: true
        },
        {
          title: '回访内容',
          dataIndex: 'REMIND_CONTENT',
          width: 150,
          sorter: true
        },
        {
          title: '回访人',
          dataIndex: 'REMINDER',
          width: 150,
          sorter: true
        },
        {
          title: '反馈信息',
          dataIndex: 'CUSTOMER_FEEDBACK',
          width: 150,
          sorter: true
        },
        {
          title: '品牌',
          dataIndex: 'brand_name',
          width: 150,
          sorter: true
        },
        {
          title: '车系',
          dataIndex: 'series_name',
          width: 150,
          sorter: true
        },
        {
          title: '车型',
          dataIndex: 'MODEL_NAME',
          width: 150,
          sorter: true
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width: 150,
          sorter: true
        },
        {
          title: '联系人手机',
          dataIndex: 'MOBILE',
          width: 150,
          sorter: true
        },
        {
          title: '联系人电话',
          dataIndex: 'PHONE',
          width: 150,
          sorter: true
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      let newObj = null;
      if (val) {
        newObj = { startDate: val.startDate, endDate: val.endDate, VIN: this.getdata[0].VIN, ownerNo: this.getdata[0].ownerNo };
      } else {
        newObj = {
          startDate: moment(new Date())
            .subtract(1, 'months')
            .format('YYYY-MM-DD'),
          endDate: moment(new Date()).format('YYYY-MM-DD'),
          VIN: this.getdata[0].VIN,
          ownerNo: this.getdata[0].ownerNo
        };
      }
      this.fetchParams = Object.assign({}, newObj, { xhrAbort: false });
    },
    collapseHandle() {
      // this.$nextTick(() => {
      //   this.BaseTable.EXECUTE_RESET_HEIGHT();
      // });
    }
  }
};
</script>
<style lang="less" scoped>
.vehicle-details-wrap {
  position: relative;
  margin-top: 20px;
  padding-bottom: @modulePadding;
  .box {
    border: 1px solid #ccc;
    padding-top: 15px;
    padding-right: 15px;
    border-radius: @borderRadius;
    margin-bottom: 20px;
    box-shadow: @boxShadow;
  }
}
</style>
